<template>
  <div class="index" >
    <div class="container">
      <div class="main">
        <div class="reset" @click="goPoster"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import {compose} from '../api/compose'

  export default {
    components: {
    },
    // mixins 混合
    mixins: [],
    data() {
      return {
        tapeIndex: 0,
        sex: 0
      }
    },
    created() {
      this.tapeIndex = this.$route.query.tapeIndex
      this.sex = this.$route.query.sex
      this.composePhoto()
    },
    methods: {
      composePhoto() {
        let params = {
          tapeIndex: this.tapeIndex,
          sex: this.sex,
          photoBase: localStorage.getItem('photoBase')
        }
        compose(params).then(res => {
          this.$router.push({path: 'daybill', query: {posterPath: res.data.posterPath}})
        })
      },
      goResult() {
        this.$router.push({path: 'result'})
      },
      goPoster() {
        this.$router.push({path: 'poster', query: {tapeIndex: this.tapeIndex}})
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import '../common/stylus/base.styl'
  .main
    width 100%
    height vw(1250)
    background url("../common/images/compose_bg.jpg")
    background-size 100% 100%
    .reset
      width 100%
      height vw(95)
      position absolute
      top vw(1130)
</style>
